import * as Vue from "vue";
import script from "./script";
import template from "./template";
import { PropType, PropsType, SetupContext } from "@/plugins/xl-setup-plugins";

// 配置
export type ConfigProp = {
  isShowLink: boolean;
};

// 列表
export type ListProp = { id: number; name: string; age: number }[];

// 设置传入的参数
const props = {
  msg: {
    type: String as PropType<string>,
    default: "",
  },
  config: {
    type: Object as PropType<ConfigProp>,
    default: (): ConfigProp => ({
      isShowLink: true,
    }),
  },
  list: {
    type: Array as PropType<ListProp>,
    default: (): ListProp => [],
  },
};

export type HelloWorldProps = PropsType<typeof props>;

// 自定义事件
export type HelloWorldEmits = {
  handleInput: (value: string) => void;
};

// 暴露的方法
export type HelloWorldExpose = {
  handleInputClear: () => void;
};

// 插槽
export type HelloWorldSlots = {
  default: () => void;
  test1: () => void;
  testParam: (param: string) => void;
};

// 上下文
export type HelloWorldSetupContext = SetupContext<
  HelloWorldEmits,
  HelloWorldExpose,
  HelloWorldSlots
>;

// 定义组件
export default Vue.defineComponent({
  name: "HelloWorld",
  // 设置传入的参数
  props,
  // 设置自定义事件，这里随便传值，主要是为了限制类型
  emits: undefined as any as HelloWorldEmits,
  // 设置渲染需要的参数
  setup: script.setup,
  // 渲染视图
  render: template.render,
});
